import React, { useState } from "react";
import logo from "./logo.svg";
import "./App.css";
import Home from "./components/Home";
import News from "./components/News";
import Phone from "./components/Phone";
import { Route, Link, NavLink, Switch, Redirect, withRouter } from "react-router-dom";

function App(props) {
    props.history.listen((link) => {
        console.log(link);
    });
    console.log("props", props);
    return (
        <div className="App">
            <div>
                <NavLink to="/home"> 点我去home </NavLink>
                <NavLink to="/news"> 点我去news </NavLink>
                <NavLink to="/phone/我是参数"> 点我去phone </NavLink>

                <button
                    onClick={() => {
                        props.history.push("/home");
                    }}
                >
                    点我去home
                </button>
                <button
                    onClick={() => {
                        props.history.push("/news");
                    }}
                >
                    点我去news
                </button>
                <button
                    onClick={() => {
                        props.history.push("/phone");
                    }}
                >
                    点我去phone
                </button>
            </div>
            <Route path="/" component={Home} /> <Route path="/home" component={Home} />
            <Route path="/news" component={News} /> <Route path="/phone/:id" component={Phone} />
        </div>
    );
}

export default withRouter(App);
